<script setup lang="ts">
import {ref} from "vue";

const props = defineProps({
  disabled: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['open', 'close'])

const isActive = ref(false);// 当前是否激活的状态
const showTooltip = ref(false);// 控制提示显示的状态

function toggle() {
  isActive.value = !isActive.value;
  if (isActive.value) {
    emit('open');
  } else {
    emit('close');
  }
}
</script>

<template>
  <div class="screen-button-wrapper" @mouseenter="showTooltip = true" @mouseleave="showTooltip = false">
    <div class="screen-button" @click="toggle">
      <svg-icon :name="isActive? 'screen-share-on' : 'screen-share-off'" color="#fff"></svg-icon>
    </div>
    <!-- 悬浮提示 -->
    <div v-show="showTooltip" class="tooltip">
      屏幕共享
    </div>
  </div>

</template>

<style scoped lang="scss">
.screen-button-wrapper {
  position: relative;
  display: inline-flex;

  .tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 10;

    /* 提示框底部的小箭头 */
    &::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border-width: 4px;
      border-style: solid;
      border-color: rgba(0, 0, 0, 0.7) transparent transparent transparent;
    }
  }

  &:hover .tooltip {
    opacity: 1;
  }
}

.screen-button{
  width: 50px;
  height: 50px;
  background-color: rgba(255,255,255,0.23);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26px;
  cursor: pointer;
  &:hover{
    background-color: rgba(255,255,255,0.18);
  }
}
</style>
